<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="box" width="800" height="800"></canvas>
<script type="text/javascript">
    var box=document.getElementById("box");
    var pen=box.getContext("2d");
    pen.clearRect(0,0,box.width,box.height);//清除画布

    //创建图像对象
    var img=new Image;
    img.src="img/1.jpg";
    img.onload=function(){
        //当drawImage传入三个参数意思就是定位图片，第一个参数是定位参数
        //后两个参数是图像的起始位置
        //pen.drawImage(img,0,0);

        //当drawImage传入五个参数意思就是规定图像的大小以及位置图片，第一个参数是定位参数
        //后两个参数是图像的起始位置，最后两个参数是图像的宽高
        pen.drawImage(img,0,0,500,200);

        //当drawImage传入九个参数意思就是规定图像的大小以及位置图片，第一个参数是定位参数
        //后四个参数是裁剪的起始位置以及宽高
        // 最后四个参数是放置到画布位置的坐标及宽高
        pen.drawImage(img,10,150,100,100,200,200,100,100);
    };



    pen.beginPath();
    pen.moveTo(50,30);
    pen.lineTo(800,30);
    pen.strokeStyle=ele;
    pen.closePath();
    pen.stroke();

</script>,
</body>
</html>